<template>
  <div>
    <div class="top">
      <input
        class="search"
        v-model="inputid"
        placeholder="请输入菜单名字查询"
      />
      <button class="atn" @click="query" type="primary">查询</button>
    </div>
    <el-divider class="hr"></el-divider>
    <!-- 表格内容 -->
    <el-table
      :data="tableData"
      :border="true"
      style="width: 100%"
      max-height="712"
      row-key="id"
      header-align="center"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column
        fixed="left"
        prop="createdAt"
        label="序号"
        backgroundColor="#FAFAFA"
        width="150"
        height="20"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.id == inputtable.id">
            <span v-if="edit">{{ scope.row.createdAt }}</span>
            <el-input v-else v-model="scope.row.createdAt"></el-input>
          </div>
          <div v-else>{{ scope.row.createdAt }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="id" label="编码" width="140" height="20">
        <template slot-scope="scope">
          <div v-if="scope.row.id == inputtable.id">
            <span v-if="edit">{{ scope.row.id }}</span>
            <el-input v-else v-model="scope.row.id"></el-input>
          </div>
          <div v-else>{{ scope.row.id }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="name" label="菜单名字" width="120" height="20">
        <template slot-scope="scope">
          <div v-if="scope.row.id == inputtable.id">
            <span v-if="edit">{{ scope.row.name }}</span>
            <el-input v-else v-model="scope.row.name"></el-input>
          </div>
          <div v-else>{{ scope.row.name }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="icon" label="菜单图标" width="120" height="20">
        <template slot-scope="scope">
          <div v-if="scope.row.id == inputtable.id">
            <span v-if="edit">{{ scope.row.icon }}</span>
            <el-input v-else v-model="scope.row.icon"></el-input>
          </div>
          <div v-else>{{ scope.row.icon }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="path" label="访问路径" width="300" height="20">
        <template slot-scope="scope">
          <div v-if="scope.row.id == inputtable.id">
            <span v-if="edit">{{ scope.row.path }}</span>
            <el-input v-else v-model="scope.row.path"></el-input>
          </div>
          <div v-else>{{ scope.row.path }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="rights" label="菜单权限" width="120" height="20">
        <template slot-scope="scope">
          <div v-if="scope.row.id == inputtable.id">
            <span v-if="edit">{{ scope.row.rights }}</span>
            <el-input v-else v-model="scope.row.rights"></el-input>
          </div>
          <div v-else>{{ scope.row.rights }}</div>
        </template>
      </el-table-column>

      <el-table-column
        prop="path_right"
        label=" 访问权限"
        width="120"
        height="20"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.id == inputtable.id">
            <span v-if="edit">{{ scope.row.path_right }}</span>
            <el-input v-else v-model="scope.row.path_right"></el-input>
          </div>
          <div v-else>{{ scope.row.path_right }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="show" label="是否显示" width="120" height="20">
        <template slot-scope="scope">
          <div v-if="scope.row.id == inputtable.id">
            <span v-if="edit">{{ scope.row.show }}</span>
            <el-input v-else v-model="scope.row.show"></el-input>
          </div>
          <div v-else>{{ scope.row.show }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="remark" label="备注" width="120" height="20">
        <template slot-scope="scope">
          <div v-if="scope.row.id == inputtable.id">
            <span v-if="edit">{{ scope.row.remark }}</span>
            <el-input v-else v-model="scope.row.remark"></el-input>
          </div>
          <div v-else>{{ scope.row.remark }}</div>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="100" height="20">
        <template slot-scope="scope">
          <div v-if="scope.row.id == inputtable.id">
            <div v-if="edit">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="medium"
                >编辑</el-button
              >
              <!-- 下拉菜单 -->
              <el-dropdown>
                <span class="el-dropdown-link"> 更多 </span>
                <el-dropdown-menu split-button="true" slot="dropdown">
                  <el-popconfirm title="这是一段内容确定删除吗？">
                    <el-button
                      style="border: none"
                      @click="confirm(scope.row)"
                      slot="reference"
                      >删除</el-button
                    >
                  </el-popconfirm>
                  <el-button type="text" @click="dialogFormson = true"
                    >添加子项目</el-button
                  >
                  <el-button type="text" @click="dialogFormson = true"
                    >添加父项目</el-button
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </div>

            <div v-else>
              <el-button @click="hand(scope.row)" type="text" size="medium"
                >确认</el-button
              >
              <el-button @click="cance(scope.row)" type="text" size="medium"
                >取消</el-button
              >
            </div>
          </div>

          <div v-else>
            <el-button @click="handleClick(scope.row)" type="text" size="medium"
              >编辑</el-button
            >
            <!-- 下拉菜单 -->
            <el-dropdown>
              <span class="el-dropdown-link"> 更多 </span>
              <el-dropdown-menu split-button="true" slot="dropdown">
                <el-popconfirm title="这是一段内容确定删除吗？">
                  <el-button
                    style="border: none"
                    @click="confirm(scope.row)"
                    slot="reference"
                    >删除</el-button
                  >
                </el-popconfirm>
                <el-button type="text" @click="dialogFormson = true"
                  >添加子项目</el-button
                >
                <el-button type="text" @click="dialogFormfather = true"
                  >添加父项目</el-button
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="添加子节点"
      :append-to-body="true"
      :visible.sync="dialogFormson"
    >
      <el-form :model="form">
        <el-form-item
          label="序号"
          style="width: 400px"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.createdAt" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          label="编码"
          style="width: 400px"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.id" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          label="菜单名字"
          style="width: 400px"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          label="菜单图标"
          style="width: 400px"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.icon" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          label="访问路径"
          style="width: 400px"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.path" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          label="菜单权限"
          style="width: 400px"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.rights" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          label="访问权限"
          style="width: 400px"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.path_right" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          label="是否显示"
          style="width: 400px"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.show" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          label="备注"
          style="width: 400px"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormson = false">取 消</el-button>
        <el-button type="primary" @click="son">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="添加同节点"
      :append-to-body="true"
      :visible.sync="dialogFormfather"
    >
      <el-form :model="form">
        <el-form-item
          label="序号"
          style="width: 400px"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.createdAt" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          label="编码"
          style="width: 400px"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.id" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          label="菜单名字"
          style="width: 400px"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          label="菜单图标"
          style="width: 400px"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.icon" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          label="访问路径"
          style="width: 400px"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.path" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          label="菜单权限"
          style="width: 400px"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.rights" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          label="访问权限"
          style="width: 400px"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.path_right" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          label="是否显示"
          style="width: 400px"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.show" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          label="备注"
          style="width: 400px"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormfather = false">取 消</el-button>
        <el-button type="primary" @click="father">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Message } from "element-ui";
import { deletemenuapi, menuupdateapi, menuaddapi } from "../../apis/menuApi";
import { menuListApi } from "../../apis/loginApi";
import setTreeData from "./menuData.js";
export default {
  data() {
    return {
      // 数据
      menulist: "",
      tableData: "",
      //    筛选框
      inputid: "",
      inputlist: "",
      //  点击变为input框
      edit: true,
      inputtable: {},
      // 添加
      dialogFormson: false,
      dialogFormfather: false,
      form: {
        name: "",
        createdAt: "",
        id: "",
        icon: "",
        path: "",
        rights: "",
        remark: "",
        path_right: "",
        show: "",
      },
      formLabelWidth: "120px",
    };
  },
  created() {
    menuListApi().then((d) => {
      if (d.code === 200) {
        this.$store.commit("common/mutationMenuList", d.data.rows);
      }
    });
    //    取出存在数仓里面的菜单数据
    this.menulist = this.$store.getters["common/menuList"];
    this.tableData = setTreeData(this.menulist);
  },
  methods: {
    // 搜索
    query() {
      if (this.inputid) {
        this.menulist.filter((item) => {
          if (item.name == this.inputid) {
            let arr = [];
            arr.push(item);
            this.tableData = arr;
          }
        });
      } else if (this.inputid == "") {
        this.tableData = setTreeData(this.menulist);
      }
    },
    // 点击变为输入框
    handleClick(row) {
      // 把值赋给对象
      this.inputtable = row;
      this.edit = !this.edit;
    },
    // 点击确认修改数据
    hand(row) {
      menuupdateapi({
        id: row.id,
        seq: row.seq,
        parent_id: row.parent_id,
        name: row.name,
        icon: row.icon,
        path: row.path,
        rights: row.rights,
        path_right: row.path_right,
        show: row.show,
        remark: row.remark,
      }).then((d) => {
        console.log(d, "dddd");
        if (d.code === 200) {
          this.tableData = setTreeData(this.menulist);
          this.edit = !this.edit;
        } else {
          this.$message({
            message: d.message,
            type: "warning",
          });
          this.edit = !this.edit;
        }
      });
    },
    // 取消
    cance() {
      this.edit = !this.edit;
    },
    // 删除菜单
    confirm(row) {
      deletemenuapi(row.id).then((d) => {
        if(d.code === 200){
            this.$message({
            message: "删除成功，请刷新页面",
            type: "success",
          });
        }
      });
    },
    // 添加父节点

    father() {
      menuaddapi({
        id: this.form.id,
        seq: this.form.seq,
        parent_id: this.form.parent_id,
        name: this.form.name,
        icon: this.form.icon,
        path: this.form.path,
        rights: this.form.rights,
        path_right: this.form.path_right,
        show: this.form.show,
        remark: this.form.remark,
      }).then((d) => {
        console.log(d, "添加");
        if (d.code === 200) {
          this.tableData = setTreeData(this.menulist);
        } else {
          this.$message({
            message: d.message,
            type: "warning",
          });

        }
      });
       this.dialogFormfather = false
    },
  },
};
</script>

<style lang="less" scoped>
.top {
  width: 100%;
  height: 34px;
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  .search {
    width: 200px;
    height: 30px;
    border: 1px solid #c0c4cc;
    outline: none;
  }
  .atn {
    width: 63px;
    height: 34px;
    background-color: #66b1ff;
    border: none;
    cursor: pointer;
  }
}
.hr {
  margin-top: 10px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
  margin-left: 10px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>